@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-checkbox' !default;

@mixin hi-checkbox-style($color: use-color-mode('primary')) {
  & {
    &__input {
      &:focus + .#{$prefix}__icon {
        border-color: $color;
        box-shadow: 0 0 0 2px use-color-mode('primary', 100);
      }
    }

    &__icon {
      &--indeterminate {
        background-color: $color;
        border-color: $color;

        &::after {
          background-color: use-color-static('white');
        }
      }

      &--checked {
        background-color: $color;
        border-color: $color;
      }
    }

    &:not(.#{$prefix}--disabled):hover {
      #{$prefix}__icon {
        border-color: $color;
      }
    }
  }
}

.#{$prefix} {
  @include component-reset();

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  box-sizing: border-box;

  &:not(&--disabled):hover {
    .#{$prefix}__icon {
      border-color: use-color-mode('primary');
    }
  }

  &--disabled {
    cursor: not-allowed;

    .#{$prefix}__icon {
      border-color: use-color('gray', 300);
      background-color: use-color('gray', 100);

      &::after {
        border-color: use-color('gray', 300);
      }

      &--indeterminate {
        &::after {
          border-color: use-color-static('white');
        }
      }
    }

    .#{$prefix}__icon--checked {
      border-color: use-color-mode('primary');
      background-color: use-color-mode('primary');
      opacity: 0.4;

      &::after {
        border-color: use-color-static('white');
      }
    }

    .#{$prefix}__text {
      color: use-color('gray', 500);
    }
  }

  &__input {
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    outline: none;
  }

  &__icon {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: middle;
    width: 16px;
    height: 16px;
    border: 1px solid use-color('gray', 300);
    margin: 0;
    border-radius: use-border-radius('sm');
    transition: 0.3s ease-out;
    line-height: 1;
    flex: none;
    background-color: use-color-static('white');

    &--indeterminate {
      &::after {
        transform: rotate(90deg) scaleY(1);
        pointer-events: none;
        box-sizing: content-box;
        content: '';
        border: none;
        border-bottom: 2px solid use-color-static('white');
        height: 8px;
        left: 6px;
        position: absolute;
        top: 2px;
        width: 2px;
        transform-origin: center;
      }
    }

    &--checked {
      &::after {
        transform: rotate(45deg) scaleY(1);
        pointer-events: none;
        box-sizing: content-box;
        content: '';
        border: 2px solid use-color-static('white');
        border-left: 0;
        border-top: 0;
        height: 7px;
        left: 4px;
        position: absolute;
        top: 1px;
        width: 4px;
        transform-origin: center;
      }
    }
  }

  &__text {
    padding: 0;
    margin-inline-start: use-spacing(4);
    margin-inline-end: 0;
    line-height: unset;
    color: use-color('gray', 700);
  }

  // Using for theme mixin
  @include hi-checkbox-style();
}

// Using for checkbox-group
.#{$prefix}-group {
  @include component-reset;

  $this: &;

  &--data-wrap {
    display: inline-flex;
    gap: use-spacing(8);
  }

  &--placement-vertical {
    &#{$this}--data-wrap {
      flex-direction: column;
    }
  }
}
